<template>
	<view class="bigBox">
		<view class="content"
			><view class="title">预约详情</view>
			<view
				class="detailed"
				v-for="(item, index) in particularsList"
				:key="index"
			>
				<view class="detailed_content">
					<view class="detailed_content_title">就诊医院：</view>
					<view class="content_item">{{ item.orgName }}</view>
				</view>
				<view class="detailed_content">
					<view class="detailed_content_title">检查项目：</view>
					<view class="content_item">{{ item.itemName }}</view>
				</view>
				<view class="detailed_content">
					<view class="detailed_content_title">检查时间：</view>
					<view class="content_item">{{
						appointExecuteTime.split(' ')[0]
					}}</view>
				</view>
				<view class="detailed_content">
					<view class="detailed_content_title">项目费用：</view>
					<view class="content_item">{{ item.price }}</view>
				</view>
				<view class="detailed_content">
					<view class="detailed_content_title">支付状态：</view>
					<view
						class="content_item"
						:style="{
							color:
								chargeFlag == 0
									? nonPayment
									: chargeFlag == 1
									? havePiad
									: chargeFlag == 2
									? refund
									: ARefundOf,
						}"
						>{{
							chargeFlag == 0
								? '未支付'
								: chargeFlag == 1
								? '已支付'
								: chargeFlag == 2
								? '已退款'
								: '退款中'
						}}</view
					>
				</view>
			</view>
			<view v-if="chargeFlag == 1" style="margin-top: 20px">
				<u-button type="error" :plain="true" @click="cancel">取消预约</u-button>
			</view>
			<view class="safe"></view
		></view>
		<u-modal
			v-model="showContent"
			:content="contentS"
			:show-cancel-button="false"
			:show-title="false"
			:content-style="{ color: 'red', fontSize: '38rpx' }"
		></u-modal>
		<u-modal
			v-model="showModal"
			:show-cancel-button="true"
			@confirm="confirm"
			@cancel="cancelBtn"
		>
			<view style="padding: 20rpx">
				<view style="text-align: center; color: red; margin-bottom: 10px">{{
					content
				}}</view>
				<u-form
					:model="model"
					:rules="rules"
					ref="uForm"
					:errorType="errorType"
				>
					<u-form-item label=" " prop="typeMenu">
						<u-input
							:border="border"
							placeholder="请选择取消原因"
							v-model="model.typeMenu"
							type="select"
							@click="typeMenuShow = true"
						></u-input> </u-form-item></u-form
			></view>
		</u-modal>
		<u-select
			mode="single-column"
			:list="typeMenuList"
			label-name="display"
			value-name="value"
			v-model="typeMenuShow"
			@confirm="typeMenuConfirm"
		></u-select>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import {
	examineOrInspectDetails,
	cancelCheckFeedback,
	cancelCheckRegister,
} from '../../http/api'
import { mapState } from 'vuex'
export default {
	data() {
		return {
			nonPayment: 'orange',
			refund: 'red',
			havePiad: 'green',
			ARefundOf: '#0089ffe0',
			chargeFlag: '',
			particularsList: [],
			model: { typeMenu: '', cancelId: '' },
			showModal: false,
			showContent: false,
			typeMenuShow: false,
			contentS: '时间已过，不能够取消',
			content: '',
			typeMenuList: [],
			rules: {
				typeMenu: [
					{
						required: true,
						message: '请选择取消原因',
						trigger: 'change',
					},
				],
			},
			errorType: ['message'],
			parameterList: { cancelType: '', cancelReason: '' },
			appointExecuteTime: '',
			timeSlot: '',
			serialNo: '',
			chargeFlag: '',
			totalFee: '',
			tradeOrderNo: '',
			checkId: '',
			patientId: '',
		}
	},
	onLoad(option) {
		console.log(JSON.parse(option.itmeParameter).id)

		this.timeSlot = JSON.parse(option.itmeParameter).timeSlot
		this.chargeFlag = JSON.parse(option.itmeParameter).chargeFlag
		this.serialNo = JSON.parse(option.itmeParameter).serialNo
		this.totalFee = JSON.parse(option.itmeParameter).totalFee
		this.tradeOrderNo = JSON.parse(option.itmeParameter).tradeOrderNo
		this.patientId = JSON.parse(option.itmeParameter).patientId
		this.checkId = JSON.parse(option.itmeParameter).id
		wx.showLoading({
			title: '加载中',
			mask: true,
		})
		this.appointExecuteTime = option.appointExecuteTime
		examineOrInspectDetails({ checkId: option.id }).then(({ data, head }) => {
			wx.showToast({
				title: '加载成功',
			})
			if (head.code == 200) {
				this.particularsList = data
			}
		})
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules)
	},
	watch: {
		showModal() {
			this.$nextTick(() => {
				this.$refs.uForm.resetFields(this.rules)
			})
			this.model.typeMenu = ''
		},
	},
	computed: {
		...mapState({
			// 身份证号
			patientIdentity: state => state.patientIdentity,
			orgCode: state => state.orgCode,
			curHos: state => state.curHos,
		}),
	},
	methods: {
		cancelCheckFeedbackData(appointExecuteTime, timeSlot) {
			cancelCheckFeedback({
				appointExecuteTime: appointExecuteTime,
				timeSlot: timeSlot,
			}).then(({ data, head }) => {
				// console.log(data, head)
				if (head.code != 200) {
					this.showContent = true
				} else {
					this.typeMenuList = data
					this.content = head.msg
					this.showModal = true
				}
			})
		},
		cancelCheckRegisterData(
			serialNo,
			orgCode,
			orgName,
			idCardNo,
			chargeFlag,
			totalFee,
			tradeOrderNo,
			checkId,
			patientId,
			cancelType,
			cancelReason,
		) {
			// 			serialNo
			// orgId     100145
			// orgName
			// idCardNo     身份证号
			// chargeFlag     收费状态
			// totalFee     总费用
			// tradeOrderNo
			// checkId
			// patientId
			// cancelType
			// cancelReason
			cancelCheckRegister({
				serialNo: serialNo,
				orgId: orgCode,
				orgName: orgName,
				idCardNo: idCardNo,
				chargeFlag: chargeFlag,
				totalFee: totalFee,
				tradeOrderNo: tradeOrderNo,
				checkId: checkId,
				patientId: patientId,
				cancelType: cancelType,
				cancelReason: cancelReason,
			}).then(({ data, head }) => {
				if (head.code == 200) {
					this.$refs.uToast.show({
						title: '取消成功',
						type: 'success',
						isTab: true,
						duration: 1000,
						url: '/pages/index/index',
					})
				} else {
					this.$refs.uToast.show({
						title: head.msg,
						type: 'error',
						isTab: true,
					})
					return
				}
			})
		},
		cancel() {
			// this.showContent = true
			// this.showModal = true
			this.cancelCheckFeedbackData(
				this.appointExecuteTime.split(' ')[0],
				this.timeSlot,
			)
		},
		confirm() {
			console.log(132)
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log(
						this.serialNo,
						this.orgCode,
						this.patientIdentity,
						this.chargeFlag,
						this.totalFee,
						this.tradeOrderNo,
						this.checkId,
						this.patientId,
						this.parameterList.cancelType,
						this.parameterList.cancelReason,
						'数据',
					)
					this.cancelCheckRegisterData(
						this.serialNo,
						this.orgCode,
						this.curHos,
						this.patientIdentity,
						this.chargeFlag,
						this.totalFee,
						this.tradeOrderNo,
						this.checkId,
						this.patientId,
						this.parameterList.cancelType,
						this.parameterList.cancelReason,
					)
				} else {
					this.showModal = true
				}
			})
		},
		cancelBtn() {
			console.log('取消')
			this.model.typeMenu = ''
		},
		typeMenuConfirm(e) {
			console.log(e)
			this.model.typeMenu = e[0].label
			this.model.cancelId = e[0].value
			this.parameterList.cancelType = e[0].value
			this.parameterList.cancelReason = e[0].label
		},
	},
}
</script>

<style lang="scss">
page {
	background: rgb(236, 236, 236);
}
.bigBox {
	width: 100%;

	.content {
		background: #fff;
		-moz-box-shadow: 2px 2px 5px #9c9c9c;
		-webkit-box-shadow: 2px 2px 5px #9c9c9c;
		box-shadow: 2px 2px 5px #9c9c9c;
		text-align: center;
		.title {
			font-size: 18px;
			padding: 10px;
			font-weight: bold;
			border-bottom: 1px solid;
		}
		.detailed {
			padding: 10px;
			border-bottom: 1px solid;
			margin-top: 20px;
			.detailed_content {
				display: flex;
				padding: 10px;
				.content_item {
					font-size: 32rpx;
				}
				.detailed_content_title {
					font-weight: bold;
					font-size: 30rpx;
					text-align: left;
					min-width: 180rpx;
					// margin-right: 100rpx;
				}
			}
		}
	}
}
.safe {
	height: 0;
	height: constant(safe-area-inset-bottom);
	height: env(safe-area-inset-bottom);
}
</style>